<ng-container *ngIf="admin_info$ | async as admin_info">
    <section *ngIf="!editing">
        <header class="title">
            <div>管理员详情</div>
            <div>
                <button *ngIf="not_self$ | async" class="btn btn-sm btn-outline-danger mr-3" (click)="delete(admin_info)">
          删除
        </button>
                <button class="btn btn-sm btn-outline-dark mr-3" (click)="dialog.open(resetPwdRef, { width: '30rem' })">
          重置密码
        </button>
                <button class="btn btn-sm btn-outline-dark" (click)="editing = true">修改信息</button>
            </div>
        </header>
        <main>
            <div class="row">
                <div class="avatar">
                    <img [src]="admin_info.photo" class="avatar-size" />
                </div>
                <div class="admin_info">
                    <div class="row">
                        <div class="col-12">
                            <h5>基本信息</h5>
                        </div>
                        <div class="col-12" *ngIf="admin_info.parent_admin">
                            <span>父管理员：</span> {{ admin_info.parent_admin }}
                        </div>
                        <div class="col-12"><span>登录账号：</span> {{ admin_info.username }}</div>
                        <div class="col-12"><span>人员姓名：</span> {{ admin_info.full_name }}</div>
                        <div class="col-12"><span>联系方式：</span> {{ admin_info.phone }}</div>
                        <div class="col-12"><span>邮箱地址：</span> {{ admin_info.email }}</div>
                        <div class="col-12"><span>人员备注：</span> {{ admin_info.remark }}</div>
                        <div class="col-12">
                            <h5>管理区域</h5>
                            <div #body class="srcoll">

                                <m-base-tree [id]="id" [data]="treeData" [goDetail]="false" (roll)="srocllTop($event)">

                                </m-base-tree>
                                <!-- <m-tree [data]="admin_zones$ | async">
                                    <ng-template let-area>
                                        <div class="line">
                                            <div class="name">
                                                {{ area.name }}
                                            </div>
                                            <div>{{ area.des }}</div>
                                            <div class="count">
                                                <span>人员数：{{ area.user_count }}</span>
                                                <span>终端数：{{ area.pc_count }}</span>
                                                <span>软件数：{{ area.software_count }}</span>
                                            </div>
                                        </div>
                                    </ng-template>
                                </m-tree> -->
                            </div>
                        </div>
                        <div class="col-12">
                            <h5>权限节点</h5>
                            <ng-container *ngFor="let auth_node_id of admin_auth$ | async">
                                <div *ngIf="auth_node_id | authNodeInfo | async as auth_node">
                                    {{ auth_node?.name }}
                                </div>
                            </ng-container>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </section>

    <section class="edit-admin-info" *ngIf="editing">
        <header class="title">
            <div>管理员详情</div>
            <div>
                <button class="btn btn-sm btn-outline-dark mr-3" (click)="editing = false">取消</button>
                <button class="btn btn-sm btn-outline-primary" form="form">保存</button>
            </div>
        </header>
        <main>
            <form id="form" class="form-inline" [formGroup]="form" (ngSubmit)="submit()">
                <div class="row">
                    <div class="col-8">
                        <div class="row">
                            <div class="avatar">
                                <m-image-preview [control]="avatarRef" class="avatar-size" [valueType]="'file'" formControlName="photo">
                                    <input type="file" accept="image/*" #avatarRef />
                                </m-image-preview>
                            </div>
                            <div class="admin_info">
                                <div class="row">
                                    <div class="col-12">
                                        <h5>基本信息</h5>
                                    </div>
                                    <div class="col-12" *ngIf="admin_info.parent_admin">
                                        父管理员：{{ admin_info.parent_admin }}
                                    </div>
                                    <div class="col-12">登录账号：{{ admin_info.username }}</div>
                                    <div class="col-12 form-group required">
                                        <label for="full_name">人员姓名</label>
                                        <input id="full_name" type="text" class="form-control form-control-sm" autocomplete="new-name" formControlName="full_name" />
                                    </div>
                                    <div class="col-12 form-group">
                                        <label for="phone">联系方式</label>
                                        <input id="phone" type="text" class="form-control form-control-sm" autocomplete="new-phone" formControlName="phone" />
                                    </div>
                                    <div class="col-12 form-group">
                                        <label for="email">邮箱地址</label>
                                        <input id="email" type="email" class="form-control form-control-sm" autocomplete="new-email" formControlName="email" />
                                    </div>
                                    <div class="col-12 form-group">
                                        <label for="remark">人员备注</label>
                                        <input id="remark" type="text" class="form-control form-control-sm" autocomplete="new-remark" formControlName="remark" />
                                    </div>
                                    <ng-container *ngIf="not_self$ | async">
                                        <div class="col-12">
                                            <h5>管理区域</h5>
                                        </div>
                                        <div class="col-12 form-group required">
                                            <label for="">管理区域</label>
                                            <m-zone-select formControlName="area_ids" required></m-zone-select>
                                        </div>

                                        <div class="col-12">
                                            <h5>权限节点</h5>
                                        </div>
                                        <div class="col-12 mt-3">
                                            <m-auth-node formControlName="auth_ids"></m-auth-node>
                                        </div>
                                    </ng-container>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </main>
    </section>
</ng-container>

<ng-template #resetPwdRef>
    <section class="reset-password">
        <header class="modal-header">重置密码</header>
        <main class="modal-body">
            <form id="resetForm" [formGroup]="resetPwdForm" (ngSubmit)="resetPwd()">
                <div class="form-group required">
                    <label for="">当前登录管理员密码</label>
                    <input type="password" class="form-control" autocomplete="password" formControlName="login_password" />
                    <div class="invalid-feedback" *ngIf="resetPwdForm.get('login_password').errors as errors">
                        <span *ngIf="errors.password">
              密码错误
            </span>
                    </div>
                </div>
                <div class="form-group required">
                    <label for="">管理员密码</label>
                    <input type="password" class="form-control" autocomplete="new-password" formControlName="password" />
                </div>
                <div class="form-group required">
                    <label for="">管理员密码验证</label>
                    <input type="password" class="form-control" autocomplete="new-password" formControlName="confirm" />
                </div>
            </form>
        </main>
        <footer class="modal-footer">
            <button class="btn btn-secondary" (click)="dialog.closeAll()">取消</button>
            <button form="resetForm" class="btn btn-primary">保存</button>
        </footer>
    </section>
</ng-template>